<html>

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <!-- Step 1 - 创建一个容器来保存SVG图像，如下所述。 -->
    <div id="svgcontainer"></div>

    <script>
        // <!-- Step 2 - 创建SVG图像，如下所述。 -->
        let width = 300
        let height = 300
        let svg = d3.select("#svgcontainer").append("svg").attr("width", width).attr("height", height)
        // Step 3 - 创建SVG组元素并设置转换和旋转属性。
        let group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
        // Step 4 - 创建一个SVG矩形并将其附加到组中。
        let rect = group.append("rect").attr("x", 30).attr("y", 30).attr("width", 80).attr("height", 80).attr("fill", "red")
        // Step 5 - 创建一个SVG圈并将其附加到组内。
        let circle = group.append("circle").attr("cx", 100).attr("cy", 100).attr("r", 30).attr("fill", "green")

    </script>


</body>

</html>